<template>
    <div>
        <div>
            <el-form :model="form" ref="form" label-width="90px" :inline="true">
                <el-form-item label="操作模块：">
                    <el-input v-model="logQuery.operation" placeholder="请输入操作模块"></el-input>
                </el-form-item>
                <el-form-item label="操作详情：">
                    <el-input v-model="logQuery.content" placeholder="请输入操作详情"></el-input>
                </el-form-item>
                <el-form-item label="创建时间：">
                    <el-date-picker type="daterange" start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD"
                        date-format="YYYY/MM/DD" value-format="YYYY-MM-DD" style="width: 280px; margin-left: 10px;"
                        v-model="createTimeRange" unlink-panels />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="findLogPage">查询</el-button>
                    <el-button @click="reset">重置</el-button>
                    <el-button type="primary" link @click="visibleClick">
                        {{ visible ? '收起' : '展开' }}
                        <el-icon :style="{ transform: visible ? 'rotate(180deg)' : 'rotate(0deg)' }">
                            <ArrowUp />
                        </el-icon>
                    </el-button>
                </el-form-item>

                <div v-if="visible">
                    <el-form-item label="操作员：">
                        <el-input v-model="logQuery.userName" placeholder="请输入操作员账号或姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="操作IP：">
                        <el-input v-model="logQuery.clientIp" placeholder="请输入操作IP"></el-input>
                    </el-form-item>
                    <el-form-item label="操作状态：">
                        <el-select v-model="logQuery.status" value-key="" placeholder="请选择操作状态" clearable filterable
                            style="width: 200px;">
                            <el-option key="请选择" label="成功" value="0" />
                            <el-option key="请选择" label="失败" value="1" />
                        </el-select>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <div>
            <el-table :data="page.records" border stripe max-height="489px">
                <el-table-column type="index" label="#" :index="indexMethod" width="50" align="center" />
                <el-table-column label="操作模块" prop="operation" width="" />
                <el-table-column label="操作详情" prop="content" width="580" />
                <el-table-column label="操作员账号" prop="loginName" width="140" />
                <el-table-column label="操作员姓名" prop="userName" width="140" />
                <el-table-column label="操作状态" width="140">
                    <template #default="scope">
                        <template v-if="scope.row.status === 0">
                            成功
                        </template>
                        <template v-else>
                            失败
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="操作操作IP" prop="clientIp" width="" />
                <el-table-column label="操作时间" prop="createTime" width="" />
            </el-table>
            <el-pagination v-model:current-page="page.current" v-model:page-size="page.size"
                :page-sizes="[2, 5, 10, 20]" :default-page-size="page.size"
                layout="total, sizes, prev, pager, next, jumper" :total="page.total" :page-count="page.pages"
                @change="findLogPage" />
        </div>
    </div>
</template>

<script lang='ts' setup>
import { ref, onMounted } from 'vue'
import request from '@/api/request';
let visible = ref(false)
let form = ref(null)

const page = ref({
    current: null, // 当前页码
    size: 10, // 每页条数
    total: null, // 总记录数
    pages: null, // 总页数
    records: []
})

class Stater {
    operation: String;
    content: String;
    createTime: null;
    endTime: null;
    userName: String;
    clientIp: String;
    status: null;
}

let logQuery = ref(new Stater)

let createTimeRange = ref(null)

const findLogPage = () => {
    if (createTimeRange.value) {
        logQuery.value.createTime = createTimeRange.value[0]
        logQuery.value.endTime = createTimeRange.value[1]
    } else {
        logQuery.value.createTime = null
        logQuery.value.endTime = null
    }
    request.get('log/page', {
        params: {
            ...logQuery.value, current: page.value.current, size: page.value.size
        }
    }).then(resp => {
        if (resp.code == 200) {
            page.value = resp.data
        }
    })
}

const visibleClick = () => {
    visible.value = !visible.value
}

const reset = () => {
    logQuery.value = new Stater
}

const indexMethod = (index: number) => {
    return index + 1;
};

onMounted(() => {
    findLogPage()
})
</script>

<style scoped></style>
